<template>
  <el-popover
    :show-after="500"
    placement="left-start"
    title="组合信息"
    width="550"
    @show="open"
  >
    <template #reference>
      <div class="w-[130px]">
        <VText title="SKU" :value="row.sku" :copy="true"></VText>
      </div>
    </template>
    <div class="dialog-content1">
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
        height="400"
      >
        <el-table-column prop="main_sku" label="主SKU" width="180" />
        <el-table-column prop="combined_sources_text" label="组合类型" />
        <el-table-column prop="sub_sku" label="子SKU" />
        <el-table-column prop="quantity" label="组成量" />
      </el-table>
    </div>
  </el-popover>
</template>

<script setup lang="jsx">
import { getSKUCombinationRelation } from "./api.js";
import { reactive, toRefs } from "vue";

const props = defineProps({
  row: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { row } = toRefs(props);

const data = reactive({
  formData: {
    audit_status: "",
    purchase_no: "",
  },
  tableData: [],
});

const { formData, tableData } = toRefs(data);
// 打开弹窗
const open = async () => {
  formData.value.sku = row.value.sku || -1;
  getSupplierHistory({
    sku_ids: row.value.id,
  });
};

const getSupplierHistory = (data) => {
  tableData.value = [];
  getSKUCombinationRelation(data)
    .then((res) => {
      tableData.value = preprocessData(res?.data);

      console.log(tableData.value);
    })
    .finally(() => {
      // tableOptionsSupplier.loading = false;
    });
};

const preprocessData = (data) => {
  const flattenedData = [];
  data.forEach((mainSku, index) => {
    mainSku.combination.forEach((subSku) => {
      flattenedData.push({
        id: index,
        sku_id: mainSku.sku_id,
        main_sku: mainSku.sku || mainSku.custom_sku,
        sub_sku: subSku.sku,
        quantity: subSku.quantity,
        combined_sources_text: subSku.combined_sources_text,
      });
    });
  });
  return flattenedData;
};

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0 || columnIndex === 1) {
    const currentMainID = row.id;
    let rowspan = 1; // 默认值
    // 查找序列的结束位置
    let endSequenceIndex = rowIndex;
    for (let i = rowIndex + 1; i < tableData.value.length; i++) {
      if (tableData.value[i].id !== currentMainID) {
        break;
      }
      endSequenceIndex = i;
    }
    // 计算需要跨越的行数
    const spanCount = endSequenceIndex - rowIndex + 1;

    // 检查是否为序列的起始行
    if (rowIndex === 0 || tableData.value[rowIndex - 1].id !== currentMainID) {
      // 如果是序列的起始行，设置 rowspan 为序列的长度
      rowspan = spanCount;
    } else {
      // 如果是序列中的中间行且不是序列的最后一项，设置 rowspan 为 0
      rowspan = 0;
    }

    return {
      rowspan,
      colspan: 1,
    };
  } else {
    return {
      rowspan: 1,
      colspan: 1,
    };
  }
};
</script>
<style>
.hidden {
  display: none;
}
.diff-class {
  color: #ff0000 !important;
}
</style>
